<template>
  <div class="event-intro">
    <img class="e-i-bg-line" src="@/assets/img/event/intro-line.png" />
    <div ref="mask" class="mask" />
    <div class="e-i-first" v-if="stepStatus.textStep">
      <p>2022.2</p>
      <p>流程表单可一键上传，轻松便捷</p>
    </div>
    <div class="e-i-second" v-if="stepStatus.textStep >= 2">
      <p>2022.5</p>
      <p>iChangan叫你在线交党费了，党的关怀常伴身边</p>
    </div>
    <div class="e-i-third" v-if="stepStatus.textStep >= 3">
      <p>2022.5</p>
      <p>邮件附件上传无障碍，轻松去焦虑</p>
    </div>
    <div class="e-i-forth" v-if="stepStatus.textStep >= 4">
      <p>2022.10</p>
      <p>人才画像，比你更了解你自己</p>
    </div>
    <div class="e-i-fifth" v-if="stepStatus.textStep >= 5">
      <p>2022.11</p>
      <p>合同线上签了，无需“两地奔波”</p>
    </div>

    <img
      v-if="stepStatus.lightStep"
      class="light e-i-light-1"
      src="@/assets/img/event/intro-light.png"
      alt=""
    />
    <img
      v-if="stepStatus.lightStep >= 2"
      class="light e-i-light-2"
      src="@/assets/img/event/intro-light.png"
      alt=""
    />
    <img
      v-if="stepStatus.lightStep >= 3"
      class="light e-i-light-3"
      src="@/assets/img/event/intro-light.png"
      alt=""
    />
    <img
      v-if="stepStatus.lightStep >= 4"
      class="light e-i-light-4"
      src="@/assets/img/event/intro-light.png"
      alt=""
    />
    <img
      v-if="stepStatus.lightStep >= 5"
      class="light e-i-light-5"
      src="@/assets/img/event/intro-light.png"
      alt=""
    />
  </div>
  <img class="bg-decorate" src="@/assets/img/common/bg-meteor.png" alt="#" />
  <img class="e-i-title" src="@/assets/img/event/intro-bg-title.png" alt="" />
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, watch, ref } from "vue";
import { changeStatusBarColor } from "@/cordova/common";

const emit = defineEmits(["animationEnd"]);

setTimeout(() => {
  emit("animationEnd");
}, 10000);

const mask = ref(null);

onMounted(() => {
  setTimer();
  changeStatusBarColor([33, 90, 205, 1]);
});

onUnmounted(() => {
  clearInterval(stepStatus.timer);
});

const stepStatus = reactive({
  timer: null,
  time: 0,
  lightStep: 1,
  textStep: 1,
});

watch(
  () => stepStatus.time,
  (n) => {
    switch (n) {
      case 1500:
        stepStatus.lightStep++;
        break;
      case 3000:
        stepStatus.textStep++;
        break;
      case 4000:
        stepStatus.lightStep++;
        break;
      case 5000:
        stepStatus.textStep++;
        break;
      case 6000:
        stepStatus.lightStep++;
        break;
      case 7000:
        stepStatus.textStep++;
        break;
      case 8000:
        stepStatus.lightStep++;
        stepStatus.textStep++;
        mask.value.style.display = "none";
        break;
    }
  }
);

const setTimer = () => {
  stepStatus.timer = setInterval(() => {
    stepStatus.time += 100;
  }, 100);
};
</script>

<script lang="ts">
export default {
  name: "EventIntro",
};
</script>

<style lang="scss" scoped>
.event-intro {
  @include full-screen-relative;
  z-index: 998;
  font-size: $font-size-normal;
  background-color: $main-blue;
}

@keyframes height {
  0% {
    height: 80vh;
  }
  20% {
    height: calc(3 / 4 * 80vh);
  }
  40% {
    height: calc(2 / 4 * 80vh);
  }
  70% {
    height: calc(1 / 4 * 80vh);
  }
  100% {
    height: 0;
  }
}
.mask {
  position: absolute;
  left: 110px;
  bottom: 6.5vh;
  width: 524px;
  height: 80vh;
  background-color: $main-blue;
  animation: height linear 8s;
}

p {
  position: absolute;
  z-index: 9999;
  width: 100vw;
}
.e-i-bg-line {
  position: absolute;
  left: 110px;
  bottom: 6.5vh;
  width: 524px;
  height: 80vh;
}
.e-i-first {
  @include animation-fade-in;
  p:first-child {
    left: 80px;
    bottom: tovh(1080);
  }
  p:last-child {
    left: 80px;
    bottom: tovh(1030);
  }
}

.e-i-second {
  @include animation-fade-in;
  p:first-child {
    left: 630px;
    bottom: tovh(865);
  }
  p:last-child {
    left: 80px;
    bottom: tovh(820);
  }
}

.e-i-third {
  @include animation-fade-in;
  p:first-child {
    left: 20px;
    bottom: tovh(620);
  }
  p:last-child {
    left: 20px;
    bottom: tovh(570);
  }
}

.e-i-forth {
  @include animation-fade-in;
  p:first-child {
    left: 630px;
    bottom: tovh(380);
  }
  p:last-child {
    left: 345px;
    bottom: tovh(330);
  }
}

.e-i-fifth {
  @include animation-fade-in;
  p:first-child {
    left: 10px;
    bottom: tovh(135);
  }
  p:last-child {
    left: 10px;
    bottom: tovh(85);
  }
}
.light {
  @include animation-fade-in;
  position: absolute;
  width: 52px;
  height: 46px;
}
.e-i-light-1 {
  left: 180px;
  bottom: tovh(1080);
}
.e-i-light-2 {
  left: 580px;
  bottom: tovh(865);
}
.e-i-light-3 {
  left: 110px;
  bottom: tovh(620);
}
.e-i-light-4 {
  left: 580px;
  bottom: tovh(380);
}
.e-i-light-5 {
  left: 110px;
  bottom: tovh(135);
}
.bg-decorate {
  @include animation-bg-twinkle;
  position: fixed;
  top: 28px;
  left: 45px;
  z-index: 999;
  height: calc(100vh - 56px);
  width: calc(100vw - 90px);
}

.e-i-title {
  @include animation-fade-in;
  position: fixed;
  bottom: tovh(420);
  left: 500px;
  z-index: 998;
  height: 391px;
  width: 126px;
}
</style>
